{% extends  'weui/base.html' %}
{% block title %}绑定手机{% endblock %}
{% block custom_css_js %}
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="/static/js/messages_zh.js"></script>
<script type="text/javascript">
$(function(){
  $('#dialogs').on('click', '.weui-dialog__btn', function(){
    $(this).parents('.js_dialog').fadeOut(200);
    wx.closeWindow();
  });
});


/*------------------jjwang 获取验证码--------------------*/
  function send_valid_code() {
      var sMobile = $("#mobile").val();
      if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(sMobile))){
        alert("请输入合法的手机号码！");
        $("#mobile").focus();
        return false;
      }
      var count = 60;
      var countdown = setInterval(CountDown, 1000);
      function CountDown() {
        $(".weui-vcode-btn").attr("disabled", true);
        $(".weui-vcode-btn").text(count + "s");
        if (count == 0) {
            $(".weui-vcode-btn").text("发送").removeAttr("disabled");
            clearInterval(countdown);
        }
        count--;
      }

      $("#id_hide_validcode").attr("value","");
      $("#sms").attr("value","")

      $.post("/account/sendsms/",{'mobile':sMobile},function(result){
          if(result.code == '0') {
              $("#id_hide_validcode").attr("value",result);
          } else {
              alert(result.code+":"+result.msg);
          }
        });
        return true;
    }
/*------------------jjwang 获取验证码---end-----------------*/


</script>
<style type="text/css">
			html{
			background: url(/static/img/bind_background_i6p.png) no-repeat
			}
			@media (min-device-width : 320px) and (max-device-width : 568px){
			html{
			background: url(/static/img/bind_background_i5.png) no-repeat
			}
		}
			@media (min-device-width : 375px) and (max-device-width : 667px){
			html{
			background: url(/static/img/bind_background_i6.png) no-repeat
			}
		}
		@media (min-device-width : 414px) and (max-device-width : 736px){
			html{
			background: url(/static/img/bind_background_i6p.png) no-repeat
			}
		}
</style>

{% endblock %}

{% block base_content %}
<!--主体-->
<form method="POST" id="mobileForm" action="/account/bind/" style="margin-top: 58%;">
{% csrf_token %}
{% if success %}
<div id="dialogs">
  <div class="js_dialog" id="iosDialog2" style="opacity: 1;">
    <div class="weui-mask">
    </div>
    <div class="weui-dialog">
      <div class="weui-dialog__bd">
        您的手机号码已经验证成功！
      </div>
      <div class="weui-dialog__ft">
        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
      </div>
    </div>
  </div>
</div>
{% endif %}
<div class="weui-cells__title"><b>{{user.profile.nickname}}</b>您好，
{% if user.profile.mobile_verified %}
您已验证过[<span style="color:red;font-weight: bold;">{{user.profile.phone}}</span>]
{% else %}
请验证您的手机号码
{% endif %}
</div>

{% if user.profile.mobile_verified %}
{% else %}
<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
            <label class="weui-label">手机号</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" name="mobile" placeholder="请输入您的手机号" id="mobile">
        </div>
        <div class="weui-cell__ft">
            <button type="button" class="weui-vcode-btn" onclick="return send_valid_code()">发送</button>
        </div>
    </div>
    <!--
    <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" placeholder="请输入验证码">
        </div>
        <div class="weui-cell__ft">
            <img class="weui-vcode-img" src="./images/vcode.jpg">
        </div>
    </div>
    -->
    <div class="weui-cell">
    <div class="weui-cell__hd">
        <label class="weui-label">短信验证码</label>
    </div>
    <div class="weui-cell__bd">
        <input class="weui-input" type="tel" placeholder="请输入您收到的短信验证码" id="sms" name="sms">
        <input type="hidden" id="id_hide_validcode" name="hide_validcode" value="">
    </div>
  </div>
</div>

<div class="weui-btn-area" style="margin-top: 45px;">
<a class="weui-btn weui-btn_primary" href="javascript:submitform();" id="submitButton" style="background-color: #9acc77;">提交</a>
</div>
{% endif %}

<br />

</form>
<script type="text/javascript">
  function submitform() {
    var mobile = $("#mobile").val();
    if(mobile == null || mobile =='') {
      alert('手机号码不能为空！');
      $('#mobile').focus();
      return;
    }
    var sms = $('#sms').val();
    if(sms == null || sms == '') {
      alert('短信验证码不能为空！');
      $('#sms').focus();
      return;
    }
    $('#mobileForm').submit();
  }
</script>
<!--主体 end-->
{% endblock %}
